<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
		<style>
			
			 h5{
		        padding-top: 15px;
		       
		    }
		
		    .field-contain label{
		        width: auto;
		        padding-right: 0;
		    }
		
		    .field-contain input[type='text']{
		        width: 40px;
		        height: 30px;
		        padding: 5px 0;
		        float: none;
		        text-align: center;
		    
		    }
		</style>
    <title>
    	
	
    </title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script>
       	mui.init();
    </script>  
    <script src="js/calUp.js">
    </script>
</head>
<body >
<div id="Layer1" style="position:absolute;width:100%; height:100%; z-index:-1">    
<img src="images/background.png" height="100%" width="100%"/>    	

</div>   
<div id="Layer2" style="position:absolute;top:20%;width:100%; height:100%; z-index:1;border:0px solid green;text-align:center; line-height: 200px"></div>
<div id="Layer3" style="position:absolute;top:0%;width:100%; height:100%; z-index:1;border:0px solid green;text-align:center; line-height: 200px"></div>
	

<script type="text/javascript" charset="utf-8">
//var rangeList = document.querySelectorAll('input[type="range"]');
//	    for(var i=0,len=rangeList.length;i<len;i++){
//	        rangeList[i].addEventListener('input',function(){
//	            if(this.id.indexOf('field')>=0){
//	                document.getElementById(this.id+'-input').value = this.value;
//	            }else{
//	                document.getElementById(this.id+'-val').innerHTML = this.value;
//	            }
//	            
//	
//	        });
//	    }
//	
//	    document.getElementById('field-range-input').addEventListener('input',function(){
//	        document.getElementById('field-range').value = this.value;
//	    });
//	var e=null;
//	do{
//		e=new Equation(0,100);
//		//alert(eval(e.goString()));
//	}while(eval(e.goString())>100||eval(e.goString())<0)
//	
//	document.getElementById("Layer2").innerHTML="<p style='width:100%; height:100%; z-index:1;vertical-align:middle;font-size:100px'>"+e.goString()+"=?</p>";
//	
	//alert('算式为：'+e.goString()+'='+eval(e.goString()));
</script>
<div class="mui-content" style="opacity:0.5;position:absolute;left:25%;width:50%;top:50%;height:20%; z-index:1000;border:1px solid green;text-align:center">
<h5 class="mui-content-padded">
 <p style="font-size: 20px;">依依请回答：</p>
</h5>
<div class="mui-input-row mui-input-range field-contain">
		            <div style="float:left">
		                <input style="font-size: 25px;height:40px;"type="text" id='field-range-input' value='60'/>
		            </div>
		            <div style="margin-left:40px;margin-right:5px;">
		                <input type="range" id='field-range' value="60" min="0" max="100" />
		            </div>
		             <div style="float:right">
		                <input style="font-size: 25px;height:45px;width:80%;" type="button" id='field-range-submit' value='决定啦！' />
		            </div>

</div>
<script type="text/javascript" charset="utf-8">
    var e=null;
    var countOfAll=0;
    var countOfRight=0;
    var countOfError=0;
    function getNewEquation()
    {
    	  do{
		e=new Equation(0,100);
		//alert(eval(e.goString()));
	   }while(eval(e.goString())>100||eval(e.goString())<0);
	   document.getElementById("Layer2").innerHTML="<p style='width:100%; height:100%; z-index:1;vertical-align:middle;font-size:100px'>"+e.goString()+"=?</p>";
	   document.getElementById("Layer3").innerHTML="<p style='width:100%; height:100%; z-index:1;vertical-align:middle;font-size:20px'>本次已答题："+
	           countOfAll+"&nbsp &nbsp 答对题数："+countOfRight+"&nbsp &nbsp 答错题数：<font color='red'>"+countOfError+"</font>&nbsp &nbsp总共答题"+window.localStorage.getItem("total")+"</p>";
	   if  (!window.localStorage.getItem("total")) 
	      window.localStorage.total=countOfAll;
	   else window.localStorage.total++;
	   countOfAll++;        
    }
    var rangeList = document.querySelectorAll('input[type="range"]');
	 for(var i=0,len=rangeList.length;i<len;i++){
	        rangeList[i].addEventListener('input',function(){
	            if(this.id.indexOf('field')>=0){
	                document.getElementById(this.id+'-input').value = this.value;
	            }else{
	                document.getElementById(this.id+'-val').innerHTML = this.value;
	            }	
	        });
	    }
	  document.getElementById('field-range-input').addEventListener('input',function(){
	        document.getElementById('field-range').value = this.value;
	    });
	  document.getElementById('field-range-submit').addEventListener('click',function(){
	  	  if(document.getElementById('field-range').value==eval(e.goString()))
	  	  {
	  	     mui.toast('恭喜依依，答对了！');
	  	     countOfRight++;
	  	    }
	  	  else
	  	  { 
	  	  	mui.toast('答错了，继续努力！');
	  	  	countOfError++;
	  	  }
	  	  getNewEquation();
	    });
	getNewEquation();
	
	
	//alert('算式为：'+e.goString()+'='+eval(e.goString()));
</script>
</body>
</html>